<script setup lang="ts">
import type { FormRules } from 'element-plus'

const treeData = ref([
  {
    label: '首页',
    value: 'a',
  },
  {
    label: '项目管理',
    value: 'b',
    children: [
      {
        label: '新增',
        value: 'b-1',
      },
      {
        label: '编辑',
        value: 'b-2',
      },
      {
        label: '删除',
        value: 'b-3',
      },
    ],
  },
  {
    label: '应用管理',
    value: 'c',
    children: [
      {
        label: '新增',
        value: 'c-1',
      },
      {
        label: '编辑',
        value: 'c-2',
      },
      {
        label: '删除',
        value: 'c-3',
      },
    ],
  },
  {
    label: '菜单管理',
    value: 'd',
    children: [
      {
        label: '新增',
        value: 'd-1',
      },
      {
        label: '编辑',
        value: 'd-2',
      },
      {
        label: '删除',
        value: 'd-3',
      },
    ],
  },
  {
    label: '用户管理',
    value: 'e',
    children: [
      {
        label: '新增',
        value: 'e-1',
      },
      {
        label: '编辑',
        value: 'e-2',
      },
      {
        label: '删除',
        value: 'e-3',
      },
    ],
  },
])

const model = ref({
  a: 1,
  b: '',
})
const rules = ref<FormRules>({})

function onChange() {
  console.log(11111, JSON.parse(model.value.b))
}
</script>

<template>
  <div class="page-wrapper">
    <div class="page">
      <ElSpace
        class="w-full"
        direction="vertical"
      >
        <ElCard>
          <BaseFilter
            title="应用"
            :model-value="1"
            :options="[
              { label: '权限中心', value: 1 },
              { label: '配置中心', value: 2 },
              { label: '翻译中心', value: 3 },
            ]"
          />

        <!-- <BaseFilter
          title="状态"
          has-all
          :options="[
            { label: '开启', value: 1 },
            { label: '关闭', value: 0 },
          ]"
        /> -->
        </ElCard>

        <ElCard>
          <BaseInfoTitle title="菜单配置">
            <template #content>
              <ElInput
                placeholder="菜单搜索"
              />

              <ElButton
                type="primary"
              >
                新增
              </ElButton>
            </template>
          </BaseInfoTitle>

          <ElTree
            class="mt-16px"
            :data="treeData"
          >
            <template
              #default="{ data }"
            >
              <div class="mr-12px">
                {{ data.label }}
              </div>

              <ElSpace class="ml-auto">
                <!-- <ElButton
                type="primary"
                link
              >
                新增
              </ElButton>

              <ElButton
                type="primary"
                link
              >
                编辑
              </ElButton> -->

                <ElButton
                  type="primary"
                  link
                >
                  删除
                </ElButton>
              </ElSpace>
            </template>
          </ElTree>
        </ElCard>
      </ElSpace>

      <ElCard>
        <ElForm
          class="overflow-auto"
          :model="model"
          :rules="rules"
          label-width="auto"
        >
          <ElFormItem label="类型：">
            <ElRadioGroup v-model="model.a">
              <ElRadio :value="1">
                菜单
              </ElRadio>
              <ElRadio :value="2">
                按钮
              </ElRadio>
            </ElRadioGroup>
          </ElFormItem>

          <ElFormItem label="所属应用：">
            <BaseSelect
              :model-value="1"
              disabled
              :options="[
                { label: '权限中心', value: 1 },
                { label: '配置中心', value: 2 },
                { label: '翻译中心', value: 3 },
              ]"
            />
          </ElFormItem>

          <ElFormItem label="上级菜单：">
            <BaseSelect
              :model-value="1"
              disabled
              :options="[
                { label: '根节点', value: 1 },
              ]"
            />
          </ElFormItem>

          <ElFormItem label="菜单名称：">
            <ElInput />
          </ElFormItem>

          <ElFormItem label="菜单编码：">
            <ElInput />
          </ElFormItem>

          <ElFormItem label="页面路径：">
            <ElInput />
          </ElFormItem>

          <ElFormItem label="组件路径：">
            <ElInput />
          </ElFormItem>

          <ElFormItem label="iframe地址：">
            <ElInput />
          </ElFormItem>

          <ElFormItem label="是否全屏：">
            <ElRadioGroup v-model="model.a">
              <ElRadio :value="1">
                是
              </ElRadio>
              <ElRadio :value="2">
                否
              </ElRadio>
            </ElRadioGroup>
          </ElFormItem>

          <ElFormItem label="是否外链：">
            <ElRadioGroup v-model="model.a">
              <ElRadio :value="1">
                是
              </ElRadio>
              <ElRadio :value="2">
                否
              </ElRadio>
            </ElRadioGroup>
          </ElFormItem>

          <!-- <ElFormItem label="打开方式：">
            <ElRadioGroup v-model="model.a">
              <ElRadio :value="1">
                当前窗口
              </ElRadio>
              <ElRadio :value="2">
                新窗口
              </ElRadio>
            </ElRadioGroup>
          </ElFormItem> -->

          <ElFormItem label="排序：">
            <ElInput />
          </ElFormItem>

          <ElFormItem label="拓展属性：">
            <ElInput
              v-model="model.b"
              :autosize="{ minRows: 4 }"
              type="textarea"
              placeholder="请按照JSON格式输入"
              @change="onChange"
            />
          </ElFormItem>
        </ElForm>
      </ElCard>
    </div>
  </div>
</template>

<style lang="less" scoped>
.page-wrapper {
  container-type: inline-size;
  container-name: page-wrapper;
}

.page {
  inline-size: 100%;
  padding: 16px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

@container page-wrapper (inline-size < 768px) {
  .page {
    grid-template-columns: 1fr;
  }
}

:deep(.el-space__item) {
  inline-size: 100%;
}
</style>
